<template>
  <el-tree :data="state.treeData" :props="defaultProps" :highlight-current="true" @node-click="handleNodeClick" />
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { ElTree, ElMessage } from 'element-plus'
import { deptApi } from '@/api/modules/system/dept'
import type { Dept } from '@/api/modules/system/dept'

const defaultProps = {
  label: 'deptName',
  value: 'deptId'
}
const state = reactive<{ treeData: Dept[] }>({ treeData: [] as Dept[] })

const emits = defineEmits(['click'])

const findTreeData = () => {
  deptApi.findTree().then(resp => {
    if (resp.success) {
      state.treeData = resp.data
    } else {
      ElMessage.error(resp.message)
    }
  })
}

onMounted(() => {
  findTreeData()
})

const handleNodeClick = (data: Dept) => {
  emits('click', data)
}
</script>

<style lang="scss" scoped>
:deep(.el-tree-node__content) {
  height: 32px;
}
</style>
